<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑题目</title>
    <c:import url="../../header.jsp"/>
</head>
<body>

<div class="content-warp">
    <div class="bg-warp">
        <table class="dggui-table cell-border table-form nodeTable">
            <thead>
            <th>序号</th>
            <th>题目名称</th>
            <th>关联选项</th>
            <th>题目类型</th>
            <th colspan="2">操作</th>
            </thead>
            <tbody id="tb">
            <c:if test="${empty subjectOptionsDtos}">
                <tr>
                    <td>1</td>
                    <td>
                        <select name="subjectId" class="dggui-select">
                            <option value="">请选择</option>
                            <c:forEach items="${evaluatingPaperSubjects}" var="subject">
                                <c:if test="${key.subjectId eq subject.subjectId}">
                                    <option value="${subject.subjectId}" selected>${subject.subjectName} </option>
                                </c:if>
                                <c:if test="${key.subjectId ne subject.subjectId}">
                                    <option value="${subject.subjectId}">${subject.subjectName} </option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </td>
                    <td>
                        <a href="javascript:void(0)" class="dggui-link dggui-icon-btn" onclick="relevanceCode(this)"><i class="iconfont icon-tianjia"></i><span>关联选项</span></a>
                    </td>
                    <td>
                        <select class="dggui-select">
                            <option value="1" <c:if test="${nodeJd.isPunish == 1}">selected</c:if>>单选</option>
                            <option value="2" <c:if test="${nodeJd.isPunish == 2}">selected</c:if>>多选</option>
                        </select>
                    </td>
                    <td>
                    </td>
                    <td>
                        <a href="javascript:void(0)" class="dggui-icon-btn" onclick="addRow(this)" ><i class="iconfont icon-tianjia"></i></a>
                    </td>
                    <input type="hidden" value="" class="hiddenSetVal">
                </tr>
            </c:if>
            <c:if test="${!empty subjectOptionsDtos}">
                <c:forEach items="${subjectOptionsDtos}" var="key" varStatus="index">
                    <tr>
                    <td>${index.index+1}</td>
                    <td>
                        <select name="subjectId" class="dggui-select">
                            <option value="">请选择</option>
                            <c:forEach items="${evaluatingPaperSubjects}" var="subject">
                                <c:if test="${key.subjectId eq subject.subjectId}">
                                    <option value="${subject.subjectId}" selected>${subject.subjectName} </option>
                                </c:if>
                                <c:if test="${key.subjectId ne subject.subjectId}">
                                    <option value="${subject.subjectId}">${subject.subjectName} </option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </td>
                    <td>
                        <c:if test="${empty key.optionsNames}">
                            <a href="javascript:void(0)" class="dggui-link dggui-icon-btn" onclick="relevanceCode(this)"><i class="iconfont icon-tianjia"></i><span>关联选项</span></a>
                        </c:if>
                        <c:if test="${not empty key.optionsNames}">
                            <span class="relevance">
                                ${key.optionsNames}
                            </span>
                            <a href="javascript:void(0)" class="dggui-icon-btn" onclick="relevanceCode(this,'${key.optionsIds}')"><i class="iconfont icon-bianji1"></i></a>
                        </c:if>
                    </td>
                    <td>
                        <select class="dggui-select">
                            <option value="1" <c:if test="${key.subjectType == 1}">selected</c:if>>单选</option>
                            <option value="2" <c:if test="${key.subjectType == 2}">selected</c:if>>多选</option>
                        </select>
                    </td>
                    <td>
                        <c:if test="${index.index!=0}">
                            <a href="javascript:void(0)" class="iboss-link" onclick="moveFun(this,1)">上移</a>
                            <a href="javascript:void(0)" class="iboss-link" onclick="moveFun(this,2)">下移</a>
                        </c:if>

                    </td>
                    <td>
                        <c:if test="${index.index!=0}">
                            <a href="javascript:void(0)" class="dggui-icon-btn" onclick="removeRow(this)"><i class="iconfont icon-shanchu"></i></a>
                        </c:if>
                        <a href="javascript:void(0)" class="dggui-icon-btn" onclick="addRow(this)" ><i class="iconfont icon-tianjia"></i></a>
                    </td>
                        <input type="hidden" value="${key.optionsIds}" class="hiddenSetVal">
                </tr>
                </c:forEach>
            </c:if>
            </tbody>
        </table>
        <div class="txt-center">
            <button class="dggui-btn" onclick="saveNodeFlow();">保存</button>
        </div>
    </div>
</div>
<c:import url="/WEB-INF/jsp/footer.jsp"/>
<script>
    dggui.use(['jquery','dialog'],function () {
    })
    //新增行
    function addRow(obj) {
        var trHtm='<tr>' +
            '            <td></td>\n' +
            '            <td>'+
            '                        <select name="subjectId" class="dggui-select">' +
            '                            <option value="">请选择</option>\n' +
            '                            <c:forEach items="${evaluatingPaperSubjects}" var="subject">' +
            '                                    <option value="${subject.subjectId}">${subject.subjectName} </option>' +
            '                            </c:forEach>' +
            '                        </select>' +
            '                    </td>' +
            '            <td>' +
            '               <a href="javascript:void(0)" class="dggui-link dggui-icon-btn" onclick="relevanceCode(this)"><i class="iconfont icon-tianjia"></i><span>关联选项</span></a>' +
            '           </td>' +
            '           <td>' +
            '               <select class="dggui-select">' +
            '                   <option value="1">单选</option>' +
            '                   <option value="2">多选</option>' +
            '               </select>' +
            '           </td>'+
            '            <td>\n' +
            '                <a href="javascript:void(0)" class="iboss-link" onclick="moveFun(this,1)">上移</a>\n' +
            '                <a href="javascript:void(0)" class="iboss-link" onclick="moveFun(this,2)">下移</a>\n' +
            '            </td>\n' +
            '            <td>\n' +
            '                <a href="javascript:void(0)" class="dggui-icon-btn" onclick="removeRow(this)"><i class="iconfont icon-shanchu"></i></a>\n' +
            '                 <a href="javascript:void(0)" class="dggui-icon-btn" onclick="addRow(this)" ><i class="iconfont icon-tianjia"></i></a>' +
            '            </td>\n' +
            '             <input type="hidden" class="hiddenSetVal">\n' +
            '        </tr>'
        $(obj).parents('tr').after(trHtm);
        tableEach();
    }
    //删除行
    function removeRow(obj) {
        $(obj).parents('tr').remove();
        tableEach()
    }
    //上下移动行
    function moveFun(obj,move) {
        var num = $(obj).parents('tr').find('td').first().text();
        var totalNum=$('.nodeTable').find('tbody').find('tr').length;
        if((num == 1 || num == 2) && move == 1){
            return;
        }
        if(num == totalNum  && move == 2){
            return;
        }
        var trHtm=$(obj).parents('tr').html();
        trHtm='<tr>'+trHtm+'</tr>';
        /*获取移动行内输入框的val*/
        var tdLen=$(obj).parents('tr').find('td').length-2;
        var tdData={};
        $(obj).parents('tr').find('td').each(function (i) {
            if(i<tdLen) {
                tdData[i]=$(this).children().val();
            }
        });
        if(move==1) {
            //上移
            $(obj).parents('tr').prev().before(trHtm);
            $(obj).parents('tr').prev().prev().find('td').each(function (j) {
                $(this).children().val(tdData[j])
            })
        }
        else {
            //下移
            $(obj).parents('tr').next().after(trHtm);
            $(obj).parents('tr').next().next().find('td').each(function (j) {
                $(this).children().val(tdData[j])
            })
        }
        $(obj).parents('tr').remove();
        tableEach();
    }
    function tableEach() {
        var trLen=$('.nodeTable').find('tbody').find('tr').length;
        $('.nodeTable').find('tbody').find('tr').each(function (i) {
            $(this).children().eq(0).text(i+1)
            if(i==0) {
            }else if(i==trLen-1) {
            }else {
                $(this).children().eq(4).empty().append('<a href="javascript:void(0)" class="iboss-link" onclick="moveFun(this,1)">上移</a>' +
                    '<a href="javascript:void(0)" class="iboss-link" onclick="moveFun(this,2)">下移</a>');
            }
        })
    }
    //    添加关联选项
    function relevanceCode(obj,str) {
        dggui.dialog.loading();
        //获取选中的题目
        var subjectId = $(obj).parents('tr').find('select[name="subjectId"]').val();
        var sortArr = [];
        $.ajax({
            url: sysInfo.basePath + '/rzsc/evaluating/options_list.do',
            data:{subjectId:subjectId},
            dataType:'json',
            success:function (data) {
                if(data.code == 0){
                    var optionsList = data.data;
                    var htm='<div class="dialog-warp-ajax">';
                    for(var key in optionsList) {
                        var optionsName = optionsList[key].optionsName;
                        var optionsScoreType = optionsList[key].optionsScoreType;
                        var optionsScore = optionsList[key].optionsScore;
                        if(optionsScoreType==1){
                            optionsName += "(+"+optionsScore+")";
                        }
                        if(optionsScoreType==2){
                            optionsName += "(-"+optionsScore+")";
                        }
                        htm+='<a href="javascript:void(0)" class="list-tag" data-id="'+optionsList[key].id+'">'+optionsName+'</a>';
                    }
                    htm+='</div>';
                    dggui.dialog.open({
                        title:'关联选项',
                        content:htm,
                        area:'700px',
                        success:function (layero,index) {
                            dggui.dialog.loading('close');
                            if (str!=undefined&&str!='') {
                                var arr=str.split(',');
                                for(var i=0;i<arr.length;i++) {
                                    var resList={};
                                    $(layero).find('.list-tag[data-id="'+arr[i]+'"]').addClass('active');
                                    var id = $(layero).find('.list-tag[data-id="'+arr[i]+'"]').data("id");
                                    var name = $(layero).find('.list-tag[data-id="'+arr[i]+'"]').text();
                                    resList.id = id;
                                    resList.name = name;
                                    sortArr[i]=resList;
                                }
                            }
                            $(layero).find('.list-tag').click(function () {
                                var resList={};
                                var isActive=$(this).hasClass('active');
                                if(isActive) {
                                    $(this).removeClass('active');
                                    var id = $(this).data("id");
                                    for(var i=0;i<sortArr.length;i++){
                                        if(id==sortArr[i].id){
                                            sortArr.splice(i,1);
                                        }
                                    }
                                }else {
                                    $(this).addClass('active');
                                    resList.id=$(this).data("id");
                                    resList.name=$(this).text();
                                    sortArr.push(resList);
                                }
                            })
                        },
                        yes:function (index,layero) {
                            var txt='',id='';
                            var ii = 0;
                            var sortArrSize = sortArr.length;
                            for(var key in sortArr){
                                var nameA = sortArr[key].name;
                                var idA = sortArr[key].id;
                                key++;
                                txt+=key+'.'+nameA+'；';
                                id += idA;
                                if(ii<sortArrSize-1){
                                    id += ',';
                                }
                                ii++;
                            }
                            $(obj).parents('td').find('.relevance').remove();
                            $(obj).before('<span class="relevance">'+txt+'</span>');
                            if(sortArr.length==0) {
                                $(obj).after('<a href="javascript:void(0)" class="dggui-link dggui-icon-btn" onclick="relevanceCode(this)"><i class="iconfont icon-tianjia"></i><span>关联选项</span></a>');
                            }else {
                                $(obj).after('<a href="javascript:void(0)" class="dggui-icon-btn" onclick="relevanceCode(this,\''+id+'\')"><i class="iconfont icon-bianji1"></i></a>');
                            }
                            setVal(sortArr,obj);
                            $(obj).remove();
                            layer.close(index)
                        }
                    })
                }
            }
        })
    }
    function setVal(res,obj){
        var ids = '';
        if(res.length>0){
            for(i=0;i<res.length;i++){
                if(i == res.length-1){
                    ids += res[i].id;
                }else{
                    ids += res[i].id+",";
                }
            }
        }
        $(obj).parents('tr').find('.hiddenSetVal').val(ids);
    }

    function saveNodeFlow(){
        var paperId = '${paperId}';//试题ID
        var trList = $("#tb").children("tr");
        var tableParms = [];
        for (var i = 0; i < trList.length; i++) {
            var subjectOptions = trList.eq(i).find(".hiddenSetVal").val();

            var tdArr = trList.eq(i).find("td");
            var subjectSort = $.trim(tdArr.eq(0).text());//序号
            var id = tdArr.eq(1).find('select').val();//名称
            var subjectType =tdArr.eq(3).find('select').val();// 题目类型
            if (!id) {
                dggui.dialog.errors('请确认名称是否完整！');
                return;
            }
            var parm = {};
            parm.paperId = paperId;
            parm.subjectSort = subjectSort;
            parm.id = id;
            parm.subjectType = subjectType;
            var subjectOptionsList = [];
            if (subjectOptions!=undefined&&subjectOptions!='') {
                var arr=subjectOptions.split(',');
                for(var j=0;j<arr.length;j++) {
                    var subjectOptionsObj = {};
                    subjectOptionsObj.paperId = paperId;
                    subjectOptionsObj.optionsId = arr[j];
                    subjectOptionsList.push(subjectOptionsObj);
                }
            }else {
                dggui.dialog.errors('请确认关联选项是否完整！');
                return false;
            }
            parm.evaluatingSubjectOptionss = subjectOptionsList;
            tableParms.push(parm);
        }
        var params = {};
        params.evaluatingPaperSubjectDtos = tableParms;
        params.paperId = paperId;
        console.log(params)
        dggui.dialog.loading();
        $.ajax({
            type: 'POST',
            async: true,
            url: sysInfo.basePath + '/rzsc/evaluating/save_paper_subject.do',
            data: JSON.stringify(params),
            dataType: 'json',
            contentType:"application/json",
            success: function (data) {
                dggui.dialog.loading('close');
                if (data.code == 0) {
                    dggui.dialog.succeed('保存成功！');
                    setTimeout("location.reload()",1300);
                } else {
                    dggui.dialog.errors(data.msg);
                }
            },
            error: function () {
                dggui.dialog.loading('close');
                dggui.dialog.errors('保存失败，请联系管理员！！');
            }
        })
    }
</script>
</body>
</html>